<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>源码准备知识点</title>
</head>

<body>
    <div id="root">
        <p>hello</p>
        <input type="text">
    </div>
    <script>
        let root = document.getElementById('root')
        // childNodes 获取所有的子元素
        let nodes = root.childNodes;
        // console.log(nodes)
        let p = nodes[1]
        let text = nodes[0]
        let input = nodes[3]
        // nodeType 文本节点  3    标签节点  1
        // console.log(text.nodeType)
        // attributes 获取所有标签属性形成的一个伪数组
        let attrs = input.attributes;
        // console.log(attrs)

        let str = '{{ msg }}';
        let reg = /\{\{\s*(\S+)\s*\}\}/
        let regResult = reg.exec(str)
        // console.log(regResult);

        // let a;
        // console.log(a = 2)

        let fragment = document.createDocumentFragment()
        let child;
        while (child = root.firstChild) {
            fragment.append(child)
        }
        // 操作文档碎片

        root.append(fragment)
        console.log(fragment)
    </script>
</body>

</html>